﻿@page "/about"
@inject ApiHelper apiHelper

@{
    ViewBag.CurrentNavigate = "/about";
    var articleInfo = await apiHelper.GetArticleBySlugAsync("about");
}
<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-heading heading-center">
                    <div class="section-subheading">MORE INFO</div>
                    <h1>@articleInfo.Title</h1>
                </div>
                <div class="content">
                    <div class="img-style">
                        <img src="public/img/about-img.jpg" alt="">
                    </div>
                   @Html.Raw(articleInfo.Html)
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Begin advantages -->
<section class="section section-bgc">
    <div class="container">
        <div class="row items">
            <div class="col-12">
                <div class="section-heading heading-center">
                    <div class="section-subheading">some reasons</div>
                    <h2>Why Choose Us</h2>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12 item">
                <div class="ini">
                    <div class="ini-count">01</div>
                    <div class="ini-info">
                        <h3 class="ini-heading item-heading-large">High Quality Hardware</h3>
                        <div class="ini-desc">
                            <p>We use top-notch hardware to develop the most efficient apps for our customers</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12 item">
                <div class="ini">
                    <div class="ini-count">02</div>
                    <div class="ini-info">
                        <h3 class="ini-heading item-heading-large">Dedicated 24\7 Support</h3>
                        <div class="ini-desc">
                            <p>You can rely on our 24/7 tech support that will gladly solve any app issue you may have.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12 item">
                <div class="ini">
                    <div class="ini-count">03</div>
                    <div class="ini-info">
                        <h3 class="ini-heading item-heading-large">30-Day Money-back Guarantee</h3>
                        <div class="ini-desc">
                            <p>If you are not satisfied with our apps, we will return your money in the first 30 days.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12 item">
                <div class="ini">
                    <div class="ini-count">04</div>
                    <div class="ini-info">
                        <h3 class="ini-heading item-heading-large">Agile and Fast Working Style</h3>
                        <div class="ini-desc">
                            <p>This type of approach to our work helps our specialists to quickly develop better apps.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12 item">
                <div class="ini">
                    <div class="ini-count">05</div>
                    <div class="ini-info">
                        <h3 class="ini-heading item-heading-large">Some Apps <br> are Free</h3>
                        <div class="ini-desc">
                            <p>We also develop free apps that can be downloaded online without any payments.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-12 item">
                <div class="ini">
                    <div class="ini-count">06</div>
                    <div class="ini-info">
                        <h3 class="ini-heading item-heading-large">High Level of Usability</h3>
                        <div class="ini-desc">
                            <p>All our products have high usability allowing users to easily operate the apps.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section><!-- End advantages -->
<!-- Begin our customers -->
<section class="section">
    <div class="container">
        <div class="row items">
            <div class="col-12">
                <div class="section-heading heading-center">
                    <div class="section-subheading">The best</div>
                    <h2>Our customers</h2>
                    <p class="section-desc">Our customers have disrupted industries, opened new markets, and made countless lives better. We are privileged to work with hundreds of future-thinking businesses, including many of the world’s top hardware, software, and consumer brands.</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/circle.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/codelab.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/earth.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/hexa.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/lightai.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/nirastate.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/treva.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4 col-6 item">
                <!-- Begin brands item -->
                <div class="brands-item item-style">
                    <img data-src="public/img/brands/zootv.png" class="lazy" src="" alt="">
                </div><!-- End brands item -->
            </div>
        </div>
    </div>
</section><!-- End our customers -->

@section css
{
    <style>
        main {
            margin: auto;
            padding: 1rem;
            width: 800px;
            max-width: calc(100% - 2rem);
            color: white;
            font-size: 20px;
            line-height: 1.6;
        }

        .astro-a {
            position: absolute;
            top: -32px;
            left: 50%;
            transform: translatex(-50%);
            width: 220px;
            height: auto;
            z-index: -1;
        }

        h1 {
            font-size: 4rem;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            margin-bottom: 1em;
        }

        .text-gradient {
            background-image: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 400%;
            background-position: 0%;
        }

        .instructions {
            margin-bottom: 2rem;
            border: 1px solid rgba(var(--accent-light), 25%);
            background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
            padding: 1.5rem;
            border-radius: 8px;
        }

            .instructions code {
                font-size: 0.8em;
                font-weight: bold;
                background: rgba(var(--accent-light), 12%);
                color: rgb(var(--accent-light));
                border-radius: 4px;
                padding: 0.3em 0.4em;
            }

            .instructions strong {
                color: rgb(var(--accent-light));
            }

        .link-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
            gap: 2rem;
            padding: 0;
        }
    </style>

}